<template>
  <div class="list-wrap">
    <a href="" class="link-item" v-for="(item, i) in arr" :key="i">
      <div class="main-block">
        <div class="avatar">
          <div class="img-bg"><img :src="item.img" alt="" /></div>
        </div>
        <div class="content-wrap">
          <div class="column-content">
            <div class="movie-title-wrap">
              <div class="movie-title">{{ item.nm }}</div>
              <span class="imax" v-if="item.ver && item.ver[5] == '2'"></span>
              <span class="imax1" v-if="item.ver && item.ver[5] == '3'"></span>
            </div>
            <div class="detail-column">
              <div class="score-line" v-if="item.mk !== 0">
                <span>观众评</span>
                <span>{{ item.mk.toFixed(1) }}</span>
              </div>
              <div
                class="score-line"
                v-if="item.mk === 0 && item.preSale === 1"
              >
                <span class="person">{{ item.wish }}</span>
                <span class="p-suffix">人想看</span>
              </div>
              <div
                class="score-line"
                v-if="item.mk === 0 && item.preSale === 0"
              >
                <span class="score-suffix">暂无评分</span>
              </div>
              <div class="actor">{{ item.desc }}</div>
              <span class="show-info">{{ item.showInfo }}</span>
            </div>
          </div>
          <div class="btn" v-if="item.preSale === 0">购票</div>
          <div class="presale" v-else>预售</div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "MyList",
  data() {
    return {
      arr: [],
    };
  },
  async created() {
    let res = await this.$axios.get(
      "/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4"
    );
    this.arr = res.data.data.hot;
  },
};
</script>

<style scoped>
.name {
  width: 2.2667rem;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  color: #333;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score {
  width: 90%;
  height: 18px;
  display: inline-block;
  color: #faaf00;
  font-size: 12px;
  position: absolute;
  bottom: 30px;
  left: 4px;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.3);
  /* box-shadow: 1px 1px 5px 2px #000; */
}

.list-wrap {
  width: 10rem;
  height: auto;
  margin-top: 165px;
}

a {
  text-decoration: none;
}

.link-item {
  width: 10rem;
  height: 114px;
  padding-left: 15px;
  display: inline-block;
}
.nav-icon {
  width: 2rem;
  height: 48px;
  display: inline-block;
  text-align: center;
  color: #333;
  text-decoration: none;
}

.nav-icon img {
  width: 25px;
  height: 25px;
  margin: 0px 25px;
}
.main-block {
  width: 9.6rem;
  height: 114px;
  display: flex;
}

.avatar {
  width: 1.7067rem;
  height: 95px;
  display: inline-block;
}

.img-bg {
  width: 1.7067rem;
  height: 90px;
}

.img-bg img {
  width: 100%;
}

.content-wrap {
  width: 7.7333rem;
  height: 90px;
  padding: 1px 14px 12px 0px;
  margin-left: 10px;
  position: relative;
  border-bottom: 1px solid #ccc;
}

.column-content {
  width: 5.9733rem;
  height: 88px;
}

.movie-title-wrap {
  width: 5.84rem;
  height: 24px;
  margin-bottom: 2px;
  overflow: hidden;
}

.movie-title {
  height: 24px;
  display: inline-block;
  color: #333;
  font-size: 17px;
  font-weight: 700;
}

.imax {
  width: 1.1467rem;
  height: 14px;
  display: inline-block;
  background: url(../assets/img/2d.png) no-repeat;
  background-size: contain;
}

.imax1 {
  width: 1.1467rem;
  height: 14px;
  display: inline-block;
  background: url(../assets/img/3dmax.png) no-repeat;
  background-size: contain;
}

.detail-column {
  width: 5.84rem;
  height: 57px;
  display: inline-block;
}

.score-line {
  width: 5.84rem;
  height: 15px;
}

.score-line span:first-child {
  font-size: 13px;
  color: #666;
}

.score-line span:nth-child(2),
.detail-column .score-line .person {
  font-size: 15px;
  color: #faaf00;
  font-weight: 600;
}

.actor,
.show-info,
.detail-column .score-line .p-suffix {
  font-size: 13px;
  color: #666;
}

.actor {
  width: 5.84rem;
  height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  margin-bottom: 5px;
}

.btn {
  width: 1.44rem;
  height: 28px;
  background-color: #f03d37;
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  right: 28px;
  bottom: 45px;
}

.presale {
  width: 1.44rem;
  height: 28px;
  background-color: rgb(60, 159, 230);
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  position: absolute;
  right: 28px;
  bottom: 45px;
}

.wishs {
  position: absolute;
  bottom: 30px;
  color: #faaf00;
  font-size: 12px;
  font-weight: 700;
}
</style>